<style>
    .uploadbox {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        text-align: center;
        width:120px;
        height:120px;
    }
</style>
<template>
    <div class="page-container is-form">
        <a-spin :spinning="spinning">
            <a-form :layout="formLayout" :form="form">
                <a-form-item label='规格名称'  v-bind="formItemLayout">
                    <a-input placeholder='请输入规格名称' v-decorator="['name',{rules: [{ required: true, message: '规格名称不能为空!' }]}]" style="width: 300px;"/>
                </a-form-item>

                <a-form-item label='规格主图' v-bind="formItemLayout" help="建议图片 JPG、PNG、GIF格式，小于100k">
                    <a-upload :show-upload-list="false" :action="uploadAction" :before-upload="beforeUpload" @change="handleChange">
                        <div class="uploadbox">
                            <img v-if="mainImage" :src="mainImage" class="spec-image"  />
                            <a-icon v-else type="cloud-upload" style="margin-top:30px;font-size:50px;color:#999"></a-icon>
                        </div>
                    </a-upload>
                    <a-input type="hidden" v-decorator="['mainImage',{rules: [{ required: true, message: '请上传规格主图!' }]}]" />
                </a-form-item>
                <a-form-item label='价格'  v-bind="formItemLayout">
                    <a-input-number placeholder="0.00" :min="0" :precision="2" v-decorator="['price',{rules: [{ required: true, message: '价格不能为空!' }]}]" style="width: 300px;"/>
                </a-form-item>
                <a-form-item label='库存'  v-bind="formItemLayout">
                    <a-input-number placeholder='请输入库存' :min="0" :precision="0" v-decorator="['stock',{rules: [{ required: true, message: '库存不能为空!' }]}]" style="width: 300px;"/>
                </a-form-item>
                <a-form-item :wrapperCol="{span:8,offset:5}">
                    <a-button type='primary'  :loading="bntLoading" @click="onSubmit">保 存</a-button>
                </a-form-item>
            </a-form>
        </a-spin>
    </div>
</template>
<script>
    export default {
        props:{
            goodsId:Number,
            model:Object
        },
        beforeCreate(){
            this.form = this.$form.createForm(this);
        },
        data() {
            return{
                formLayout:'horizontal',
                spinning:false,
                loading:false,
                bntLoading:false,
                uploadAction:this.UPLOAD_URL,
                mainImage:'',
            }
        },
        computed: {
            formItemLayout () {
                const { formLayout } = this
                return formLayout === 'horizontal' ? {
                    labelCol: { span:5},
                    wrapperCol: { span:18 },
                } : {}
            }
        },
        methods:{
            beforeUpload(file, fileList){
                const isJPG = file.type === 'image/jpeg';
                const isPNG = file.type === 'image/png';
                const isGif = file.type === 'image/gif';
                if (!isJPG && !isPNG && !isGif) {
                    this.$message.error('图片格式错误,请检查后重新上传!');
                    return false;
                }
                const isLt500KB = file.size / 1024 / 100
                if (!isLt500KB) {
                    this.$message.error('图片大小不合适,请上传小于100KB的图片!');
                    return false;
                }
                return true;
            },
            handleChange({file, fileList}) {
                if(file.status == 'done') {
                    if (file.response) {
                        this.mainImage = file.response.data
                        this.form.setFieldsValue({'mainImage': file.response.data});
                    }
                }
            },
            onSubmit(){
                this.bntLoading = true;
                this.form.validateFields(
                    (err,values) => {
                        if (!err) {
                            let model = {}
                            let type = "add"
                            if(this.model != null){
                                type = "edit"
                                model = this.model
                            }
                            let form = {...model,...values,goodsId:this.goodsId}
                            this.$emit("save",type, form)
                        }else{
                            this.bntLoading = false;
                        }
                    },
                )
            },
        },
        mounted(){
            if(this.model != null) {
                const {name, price,mainImage, stock} = this.model
                this.mainImage = mainImage
                this.form.setFieldsValue({name, price,mainImage, stock});
            }
        },
    }
</script>